<table class="table table-bordered table-hover table-striped table-keep-line" style="margin-top:unset !important;">
  <thead>
    <tr role="row">
      <th *ngIf="listType == '1'||listType == '3'||listType == '4'">
        <div class="cell" style="width:50px !important">
          <div class="checkbox checkbox-primary">
            <input type="checkbox" id="isCheckedAll" [(ngModel)]="isCheckedAll" name="isCheckedAll" (ngModelChange)="checkedAll()">
            <label>
            </label>
          </div>
        </div>
      </th>
      <th>
        <div class="cell" style="min-width:70px !important">序号
        </div>
      </th>
      <th *ngIf="listType == '4'">
        <div class="cell" (click)="orderData('commitOprZh')">提交人
          <i class="fa fa-sort"></i>
        </div>

      </th>
      <th>
        <div class="cell" (click)="orderData('nBatchNo')">批次号
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th>
        <div class="cell" style="min-width:70px !important" (click)="orderData('nQdId')">编号
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th *ngIf="listType == '3'||listType == '4'">
        <div class="cell" (click)="orderData('sFlowStepZh')">当前流程
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th *ngIf="listType == '3'||listType == '4'">
        <div class="cell" (click)="orderData('sOprStateZh')">处理状态
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th>
        <div class="cell" style="min-width:100px !important" (click)="orderData('sItemTypeZh')">属性
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th>
        <div class="cell" style="min-width:100px !important" (click)="orderData('sFileName')">文件名称
          <i class="fa fa-sort"></i>
        </div>
      </th>

      <th>
        <div class="cell" style="min-width:150px !important" (click)="orderData('f1')">内容
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th>
        <div class="cell" (click)="orderData('sValidZh')">是否有效
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th>
        <div class="cell" (click)="orderData('sFileSource')">条款出处
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th>
        <div class="cell" (click)="orderData('sFundTypeZh')">适用QDII类别
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th>
        <div class="cell" (click)="orderData('sFundGroupdsZh')">适用QDII名称
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th>
        <div class="cell" (click)="orderData('f3')">指标释义
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th>
        <div class="cell" (click)="orderData('f4Zh')">bloomberg系统能否控制
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th>
        <div class="cell" (click)="orderData('f5')">系统设置代码
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th>
        <div class="cell" style="min-width:70px !important" (click)="orderData('f6')">阀值
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th>
        <div class="cell" (click)="orderData('f7')">人工控制方法说明
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th>
        <div class="cell" (click)="orderData('f8')">系统实施相关条件
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th>
        <div class="cell" style="min-width:70px !important" (click)="orderData('f9')">备注1
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th>
        <div class="cell" style="min-width:70px !important" (click)="orderData('f10')">备注2
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th *ngIf="listType == '1'">
        <div class="cell" (click)="orderData('commitOprZh')">录入人
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th *ngIf="listType == '1'">
        <div class="cell" (click)="orderData('commitOprDate')">录入时间
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th *ngIf="listType == '1'">
        <div class="cell" (click)="orderData('auditOprZh')">条目复核
          <i class="fa fa-sort"></i>
        </div>
      </th>
      <th *ngIf="listType == '1'">
        <div class="cell" (click)="orderData('auditOprDate')">复核时间
          <i class="fa fa-sort"></i>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of listData;let index=index">
      <td *ngIf="listType == '1'||listType == '3'||listType == '4'">
        <div class="cell" style="width:50px !important" *ngIf="item.sFlowStep != null">
          <div class="checkbox checkbox-primary">
            <input type="checkbox" name="checkbox1">
            <label>
            </label>
          </div>
        </div>
      </td>
      <td [attr.title]="index+1">
        <div class="short_name">{{index+1}}</div>
      </td>
      <td *ngIf="listType == '4'" [attr.title]="item.commitOprZh">
        <div class="short_name">{{item.commitOprZh}}</div>
      </td>
      <td [attr.title]="item.nBatchNo">
        <div class="short_name">{{item.nBatchNo}}</div>
      </td>
      <td class="short_name" [attr.title]="item.nQdId">
        <div class="cell" *ngIf="listType == '1'" [ngClass]="{'dataChange':item.sState =='在途'}">{{item.nQdId}}</div>
        <div class="cell" *ngIf="listType == '2'||listType == '3'||listType == '4'">{{item.nQjId}}</div>
      </td>

      <td *ngIf="listType == '3'||listType == '4'" class="short_name" [attr.title]="item.sFlowStepZh">
        <div name="sFlowStepZh">
          {{item.sFlowStepZh}}
        </div>
      </td>
      <td *ngIf="listType == '3'||listType == '4'" class="short_name" [attr.title]="item.sOprStateZh">
        <div name="sOprStateZh">
          {{item.sOprStateZh}}
        </div>
      </td>
      <td class="short_name" [attr.title]="item.sItemTypeZh">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].sItemTypeZh == 'red'}">{{item.sItemTypeZh}}</div>
      </td>
      <td class="short_name" [attr.title]="item.sFileName">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].sFileName == 'red'}">{{item.sFileName}}</div>
      </td>
      <td class="short_name" [attr.title]="item.f1">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].f1 == 'red'}">{{item.f1}}</div>
      </td>
      <td class="short_name" [attr.title]="item.sValidZh">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].sValidZh == 'red'}">{{item.sValidZh}}</div>
      </td>
      <td class="short_name" [attr.title]="item.sFileSource">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].sFileSource == 'red'}">{{item.sFileSource}}</div>
      </td>
      <td class="short_name" [attr.title]="item.sFundTypeZh">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].sFundTypeZh == 'red'}">{{item.sFundTypeZh}}</div>
      </td>
      <td class="short_name" [attr.title]="item.sFundGroupdsZh">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].sFundGroupdsZh == 'red'}">{{item.sFundGroupdsZh}}</div>
      </td>
      <td class="short_name" [attr.title]="item.f3">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].f3 == 'red'}">{{item.f3}}</div>
      </td>
      <td class="short_name" [attr.title]="item.f4Zh">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].f4Zh == 'red'}">{{item.f4Zh}}</div>
      </td>
      <td class="short_name" [attr.title]="item.f5">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].f5 == 'red'}">{{item.f5}}</div>
      </td>
      <td class="short_name" [attr.title]="item.f6">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].f6 == 'red'}">{{item.f6}}</div>
      </td>
      <td class="short_name" [attr.title]="item.f7">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].f7 == 'red'}">{{item.f7}}</div>
      </td>
      <td class="short_name" [attr.title]="item.f8">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].f8 == 'red'}">{{item.f8}}</div>
      </td>
      <td class="short_name" [attr.title]="item.f9">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].f9 == 'red'}">{{item.f9}}</div>
      </td>
      <td class="short_name" [attr.title]="item.f10">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].f10 == 'red'}">{{item.f10}}</div>
      </td>
      <td *ngIf="listType == '1'" class="short_name" [attr.title]="item.commitOprZh">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].commitOprZh == 'red'}">{{item.commitOprZh}}</div>
      </td>
      <td *ngIf="listType == '1'" class="short_name" [attr.title]="item.commitOprDate">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].commitOprDate == 'red'}">{{item.commitOprDate}}</div>
      </td>
      <td *ngIf="listType == '1'" class="short_name" [attr.title]="item.auditOprZh">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].auditOprZh == 'red'}">{{item.auditOprZh}}</div>
      </td>
      <td *ngIf="listType == '1'" class="short_name" [attr.title]="item.auditOprDate">
        <div class="cell" [ngClass]="{'dataChange': setColor[index].auditOprDate == 'red'}">{{item.auditOprDate}}</div>
      </td>
    </tr>
  </tbody>

</table>